<script>
import { templateTypeArray, transportTypeArray, associatedCityList } from '@/constants/essentialData/freight'

export default {
  name: 'freightForm',
  emits: ['success'],
  data() {
    return {
      templateTypeArray,
      transportTypeArray,
      associatedCityList,
      /* 表单数据对象 */
      formData: {
        // 模板类型：1-同城寄，2-省内寄，3-经济区互寄，4-跨省
        templateType: '',
        // 运送类型：1-普快，2-特快
        transportType: '',
        // 关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽
        associatedCityList: [],
        // 首重价格
        firstWeight: '',
        // 续重价格
        continuousWeight: '',
        // 轻抛系数
        lightThrowingCoefficient: ''
      },
      /* 表单校验对象 */
      formRules: {
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change' }
        ],
        associatedCityList: [
          { required: true, message: '请选择关联城市', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' }
        ],

        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /*
    * 用于数据回显
    *  */
    getFreightData(freight) {
      this.formData = { ...freight }
    },
    /*
    * 发送添加或者编辑模板的请求
    *  */
    async submit(edit) {
      if (edit) {
        delete this.formData.computeWeight
        delete this.formData.expense
        delete this.formData.created
        delete this.formData.updated
      } else {
        delete this.formData.id
      }
      const addOrUpdateResult = await this.$store.dispatch('freightStore/addOrUpdateFreightAction', this.formData)
      this.$message.success(addOrUpdateResult)
    },
    /*
    * 清空表单数据
    *  */
    clearFormData() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="模板类型" prop="templateType">
      <el-select placeholder="请选择模板类型" v-model.number="formData.templateType">
        <el-option v-for="item in templateTypeArray" :value="item.type" :label="item.name" :key="item.type"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="运送类型" prop="transportType">
      <el-select placeholder="请选择运送类型" v-model.number="formData.transportType">
        <el-option v-for="item in transportTypeArray" :value="item.type" :label="item.name" :key="item.type"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="关联城市" prop="associatedCityList">
      <el-select placeholder="请选择关联城市" multiple v-model="formData.associatedCityList">
        <el-option v-for="item in associatedCityList" :value="item.type" :label="item.name" :key="item.type"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="首重价格" prop="firstWeight">
      <el-input placeholder="请输入首重价格" v-model.number="formData.firstWeight">
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="续重价格" prop="continuousWeight">
      <el-input placeholder="请输入续重价格" v-model.number="formData.continuousWeight">
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
      <el-input placeholder="请输入轻抛系数" v-model.number="formData.lightThrowingCoefficient"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 85% !important;

  .el-select {
    width: 100%;
  }
}
</style>
